import React, { Component } from 'react';
import {  Search ,TabBar } from 'antd-mobile'
import "./style.scss"
import {
    AppOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
  import {getList} from "../../api"

class Index extends Component {
    state={
        tabs:[{
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
          },
          {
            key: 'todo',
            title: '我的待办',
            icon: <UnorderedListOutline />,
            badge: '5',
          },
          {
            key: 'message',
            title: '我的消息',
            icon: <MessageFill /> 
          },
          {
            key: 'personalCenter',
            title: '个人中心',
            icon: <UserOutline />,
          },],
        list:[]
    }
    async getListAndSet(){
        const resp=await getList()
        this.setState({list:resp.data.data})
    }
    componentDidMount(){
        this.getListAndSet()
    }
    toDetail(v){
        this.props.history.push({pathname:'/detail',state:v})
    }
    render() {
        const {tabs,list}=this.state
        return (
            <div className='listWrap'>
                <header><span onClick={()=>this.props.history.push('/')}>返回</span><Search placeholder='请输入内容' /></header>
                <main>
                    {
                        list.length>0&&list.map((v,i)=>{
                            return(
                                <dl key={i} onClick={()=>this.toDetail(v)}>
                                    <dt><img src={v.url} alt="" /></dt>
                                    <dd>
                                        <h5>{v.title}</h5>
                                        <p>{v.desc}</p>
                                        <p style={{color:'red'}}>￥{v.price}</p>
                                    </dd>
                                </dl>
                            )
                        })
                    }
                </main>
                <TabBar>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
            </TabBar>
            </div>
           
        );
    }
}

export default Index;
